<template>
    <!--    <div class="tableInfo">12121212</div>-->

    <el-table ref="tableComponentRef" :cell-style="{padding:'0px'}" :data="assetList" :max-height="height"
              :row-key="getRowKeys" :row-style="rowStyle" :scrollbar-always-on='true' border
              :highlight-current-row="true" stripe style="width: 100%;font-size: 13px" @select="checkSelect"
              @select-all="checkSelectAll"
              @selection-change="selectionChange"
              @sort-change="sortChange">
        <el-table-column v-if="checkBox" :reserve-selection='true' type="selection" width="55"/>
        <template v-for="(item,index) in tableColumns" :key="index">

            <template v-if="item.scopedSlotsColumn">

                <slot :name="item.dataIndex"></slot>

            </template>

            <template v-else-if="item.scopedSlots">
                <el-table-column :align="item.align||'left'" :fixed="item.fixed" :label="item.title"
                                 :prop="item.dataIndex"
                                 :width="item.width">
                    <template #default="{ row }">
                        <slot :name="item.dataIndex" :row="{...row,[item.dataIndex]:row[item.dataIndex]}"></slot>
                    </template>
                </el-table-column>
            </template>
            <template v-else>
                <!--                <el-table-column v-if="item.dataIndex=='identityUuid'"  align="center" :label="item.title"-->
                <!--                                 :fixed="item.fixed" prop="identityUuid" :width="item.width" :formatter="formatter"></el-table-column>-->
                <el-table-column :align="item.align||'left'" :fixed="item.fixed" :label="item.title"
                                 :prop="item.dataIndex"
                                 :width="item.width" 
                                 :show-overflow-tooltip="true">
                    <template #default="{ row }">
						<span>{{
                    (row[item.dataIndex] === '' || row[item.dataIndex] === null || row[item.dataIndex] === undefined) ? '---' : row[item.dataIndex]
                }}</span>
                    </template>
                </el-table-column>
            </template>

        </template>

        <!-- <el-table-column fixed="right" label="操作" width="160">
                <template #default="{ row }">
                    <el-button :disabled="row.materialConfiId!=1" @click="lendFn(row)" type="text" size="small">借用审批</el-button>

                    <el-button type="text" size="small" @click="editTable(row)">编辑</el-button>

                    <el-button @click="deleteFn(row)" type="text" size="small">删除</el-button>

                </template>
            </el-table-column> -->
    </el-table>
</template>

<script>
import {defineComponent, nextTick, ref} from 'vue';

export default defineComponent({
    props: ['assetList', 'tableColumns', 'height', 'checkBox'],
    setup(props, {attrs, slots, emit, expose}) {
        // const tableHeight = ref(0);
        // tableHeight.value = document.body.clientHeight - 70 - 127 - 30 - 35 - 56 - 108;
        // onMounted(() => {
        //     window.addEventListener('resize', () => {
        //         tableHeight.value = document.body.clientHeight - 70 - 127 - 30 - 35 - 56 - 108;
        //     });
        // })

        const tableComponentRef = ref(null);

        const checkAll = () => {
            nextTick(() => {
                tableComponentRef.value.toggleAllSelection();
            });
        };
        const rowStyle = {
            height: '40px',
        }
        const selectionChange = (selection) => {

        }
        const clearSelection = (rows) => {
            if (rows) {
                rows.forEach((row) => {
                    // TODO: improvement typing when refactor table
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    tableComponentRef.value.toggleRowSelection(row, undefined);
                });
            } else {
                tableComponentRef.value.clearSelection();
            }
        };

        const getRowKeys = (row) => {
            return row.id || row.carId;
        };

        const lendFn = (row) => {
            emit('lendFn', row);
        };
        const returnFn = (row) => {
            emit('returnFn', row);
        };
        const editTable = (row) => {
            emit('editTable', row);
        };
        const checkSelect = (selection, row) => {
            emit('checkSelect', selection, row);
        };
        const checkSelectAll = (row) => {
            emit('checkSelectAll', row);
        };

        const deleteFn = (row) => {
            emit('deleteFn', row);
        };

        const filterHandler = (val, row, column) => {
            // emit('filterHandlerFn', val, row, column);

            const property = column['property'];
            return row[property] === val;
        };

        const sortChange = ({column, prop, order}) => {
            emit('sortChangeFn', column, prop, order);
        };

        expose({
            checkAll,
            clearSelection
        });
        return {
            lendFn,
            returnFn,
            editTable,
            checkSelect,
            checkSelectAll,
            deleteFn,
            filterHandler,
            sortChange,
            getRowKeys,
            tableComponentRef,
            rowStyle,
            selectionChange
        };
    },
});
</script>

<style>
/*定义滚动条⾼宽及背景⾼宽分别对应横竖滚动条的尺⼨*/
::-webkit-scrollbar {
    width: 0px;
    /*滚动条宽度*/
    height: 10px;
    /*滚动条⾼度*/
}

/*定义滚动条轨道内阴影+圆⾓*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(164, 164, 164, 0.3);
    border-radius: 10px;
    /*滚动条的背景区域的圆⾓*/
    background-color: '';
    /*滚动条的背景颜⾊*/
}

/*定义滑块内阴影+圆⾓*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*滚动条的圆⾓*/
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background-color: '';
    /*滚动条的背景颜⾊*/
}

.tableInfo {
    height: 50px;
    width: 100%;
    line-height: 50px;
    border: 1px solid #ebeef5;

    background-color: #ebeef5;
    border-radius: 3px;
}
</style>
